<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchList">
          <a-row :gutter="48">
            <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
              <a-form-item label="ID搜索">
                <a-input v-model="queryParam.lookId" placeholder="ID搜索" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
              <a-form-item label="来源渠道">
                <a-select v-model="queryParam.originSource" placeholder="请选择" mode="multiple" allowClear :maxTagCount="2" :dropdownStyle="{ zIndex: '5' }">
                  <a-select-option :value="item.code" v-for="item in originSource" :key="item.code">{{ item.title }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
              <a-form-item label="应用渠道">
                <a-select v-model="queryParam.sysLookTypes" placeholder="请选择" mode="multiple" allowClear :maxTagCount="2" :dropdownStyle="{ zIndex: '5' }">
                  <a-select-option :value="item.code" v-for="item in sysLookTypes" :key="item.code">{{ item.title }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
              <a-form-item label="启用状态">
                <a-select v-model="queryParam.lookStatus" placeholder="请选择" :dropdownStyle="{ zIndex: '5' }">
                  <a-select-option value="">不限</a-select-option>
                  <a-select-option :value="1">上架</a-select-option>
                  <a-select-option :value="0">下架</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
              <a-form-item label="评级">
                <a-select v-model="queryParam.level" placeholder="请选择" :dropdownStyle="{ zIndex: '5' }">
                  <a-select-option value="">不限</a-select-option>
                  <a-select-option value="99">未评级</a-select-option>
                  <a-select-option value="10">S</a-select-option>
                  <a-select-option value="20">A</a-select-option>
                  <a-select-option value="30">B</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
              <a-form-item label="品牌">
                <a-select v-model="queryParam.brands" placeholder="请选择" mode="multiple" allowClear :maxTagCount="2" :dropdownStyle="{ zIndex: '5' }">
                  <a-select-option :value="item.code" v-for="item in brandList" :key="item.code">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
              <a-form-item label="年份" has-feedback>
                <!-- <a-date-picker
                  mode="year"
                  style="width: 100%"
                  placeholder="请选择年份"
                  format="YYYY"
                  v-model="queryParam.year"
                  :open="yearShowOne"
                  @change="handChange"
                  @openChange="openChangeOne"
                  @panelChange="panelChangeOne"
                /> -->
                <a-select v-model="queryParam.years" placeholder="请选择" mode="multiple" :maxTagCount="2" allowClear :dropdownStyle="{ zIndex: '5' }">
                  <a-select-option value="">不限</a-select-option>
                  <a-select-option :value="item.name" v-for="item in yearList" :key="item.name">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
              <a-form-item label="波段">
                <a-select v-model="queryParam.bands" placeholder="请选择" allowClear mode="multiple" :maxTagCount="4" :dropdownStyle="{ zIndex: '5' }">
                  <a-select-option v-for="(item, index) in bandsList" :key="index" :value="item.attribname">{{ item.attribname }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
              <a-form-item label="季节">
                <a-select v-model="queryParam.seasons" placeholder="请选择" mode="multiple" :maxTagCount="2" allowClear :dropdownStyle="{ zIndex: '5' }">
                  <a-select-option :value="item.code" v-for="(item, index) in season" :key="index"> {{ item.name }} </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
              <a-form-item label="商品大类">
                <a-select v-model="queryParam.bigCateIds" placeholder="请选择" show-search :filter-option="filterOption" @change="changeGood" allowClear :dropdownStyle="{ zIndex: '5' }">
                  <a-select-option :value="item.key" v-for="item in categoryTrees" :key="item.key">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
              <a-form-item label="商品小类">
                <a-select v-model="queryParam.smallCateIds" placeholder="请选择" allowClear :dropdownStyle="{ zIndex: '5' }">
                  <a-select-option :value="item.key" v-for="item in scategorys" :key="item.key">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
              <a-form-item label="风格标签">
                <a-select v-model="queryParam.stylingCodes" placeholder="请选择" mode="multiple" show-search :filter-option="filterOption" :maxTagCount="3" allowClear :dropdownStyle="{ zIndex: '5' }">
                  <a-select-option :value="item.code" v-for="item in styleList" :key="item.code">
                    {{ item.title }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
              <a-form-item label="场景标签">
                <a-select v-model="queryParam.sceneCodes" placeholder="请选择" mode="multiple" show-search :filter-option="filterOption" :maxTagCount="3" allowClear :dropdownStyle="{ zIndex: '5' }">
                  <a-select-option :value="item.code" v-for="item in sceneList" :key="item.code">
                    {{ item.title }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
              <a-form-item label="商品款号搜索">
                <a-input placeholder="请输入商品款号" v-model="queryParam.pcode" />
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
              <a-form-item label="素材标题搜索">
                <a-input placeholder="请输入素材标题" v-model="queryParam.lookName" />
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
              <a-form-item label="素材内容搜索">
                <a-input placeholder="请输入素材内容" v-model="queryParam.lookContent" />
              </a-form-item>
            </a-col>
            <a-col :xxl="24" :xl="24" :md="12" :sm="24">
              <span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' }">
                <a-button type="primary" style="margin-right: 8px" @click="handleImportXls">导入</a-button>
                <a-button type="primary" @click="searchList">查询</a-button>
                <a-button style="margin-left: 8px" @click="resetList">重置</a-button>
                <!-- <a-button type="primary" style="margin-left: 8px" icon="plus" @click="addList">新增</a-button> -->
                <a-dropdown :disabled="!(selectedRowKeys.length > 0)">
                  <a-menu slot="overlay">
                    <a-menu-item key="1" @click="frameClick(1)"><a-icon type="check-circle" style="font-size: 14px" />启用</a-menu-item>
                    <a-menu-item key="2" @click="frameClick(0)"><a-icon type="stop" style="font-size: 14px" />禁用</a-menu-item>
                  </a-menu>
                  <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /> </a-button>
                </a-dropdown>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table ref="table" size="default" :rowKey="record => record.id" :columns="columns" :data="loadData" :rowSelection="rowSelection" :pagination="paginationProps" :scroll="{ x: 1300 }">
        <span slot="showImage" slot-scope="record">
          <img class="img" :src="record.gallList[0].url" alt="" v-if="record.gallList && record.gallList.length > 0" />
          <img src="https://img.bzhz.jnbygroup.com/lack.png" style="width: 80px; height: 80px" v-else />
        </span>
        <span slot="originSource" slot-scope="record">
          <template v-if="record.originSource">
            {{ originSourceTitle(record.originSource) }}
          </template>
        </span>
        <span slot="productImage" slot-scope="text, record">
          <a-skeleton :loading="skeLoading" :paragraph="false">
            <div v-if="record.productList && record.productList.length <= 5">
              <div v-for="(product, index) in record.productList" :key="index" class="like-theme" @click="handleDetails(product.skc)">
                <a-tooltip placement="top">
                  <template slot="title">
                    <span>{{ product.skc }}</span>
                  </template>
                  <img class="img" :src="product.extendJson.productImage" alt="" />
                </a-tooltip>
              </div>
            </div>
            <a-carousel arrows :dots="false" :slidesToShow="5" style="margin-left: 30px" :slidesToScroll="5" :infinite="false" v-if="record.productList && record.productList.length > 5">
              <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px">
                <a-icon type="left" />
              </div>
              <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
                <a-icon type="right" />
              </div>
              <div class="like-theme" v-for="product in record.productList" :key="product.id" @click="handleDetails(product.skc)">
                <a-tooltip placement="top">
                  <template slot="title">
                    <span>{{ product.skc }}</span>
                  </template>
                  <img class="img" :src="product.extendJson.productImage" alt="" />
                </a-tooltip>
              </div>
            </a-carousel>
          </a-skeleton>
        </span>
        <span slot="tag" slot-scope="record">
          <a-tag style="margin: 4px" color="blue" v-for="label in record.labelList" :key="label.labelId">
            {{ label.labelName }}
          </a-tag>
        </span>
        <span slot="status" slot-scope="record">
          <span>{{ record.status == 1 ? '启用' : '禁用' }}</span>
        </span>
        <span slot="attr" slot-scope="record">
          <a-tag style="margin: 4px" color="red" v-if="record.level">{{ record.level | level }}</a-tag>
          <a-tag style="margin: 4px" color="green" v-if="record.gender != null && record.gender != undefined">{{ record.gender | gender }}</a-tag>
        </span>
        <span slot="channels" slot-scope="record">
          <a-tooltip placement="top" v-if="record.sysLookTypes && record.sysLookTypes.length > 0">
            <template slot="title">
              <template v-if="getStatus(record.sysLookTypes, 'B10-A01') && record.bFashionerMatch">
                <span>有搭搭配：{{ record.bFashionerMatch.status == 1 ? '上架' : '下架' }}</span
                ><br />
              </template>
              <template v-if="getStatus(record.sysLookTypes, 'B10-A05') && record.qihuabFashionerMatch">
                <span>企划搭配：{{ record.qihuabFashionerMatch.status == 1 ? '上架' : '下架' }}</span
                ><br />
              </template>
              <template v-if="getStatus(record.sysLookTypes, 'B10-A02') && record.retail">
                <span>零售搭配：{{ record.retail.isShelf == 1 ? '上架' : '下架' }}</span
                ><br />
              </template>
              <!-- <template v-if="getStatus(record.sysLookTypes, 'B10-A03') && record.qihuabFashionerMatch">
                <span>导购素材：{{ record.qihuabFashionerMatch.status == 1 ? '上架' : '下架' }}</span
                ><br />
              </template>
              <template v-if="(getStatus(record.sysLookTypes, 'B10-A04')&&record.retail)">
                <span>单品搭配：{{ record.retail.status == 1 ? '上架' : '下架' }}</span
                ><br />
              </template>
              <template v-if="(getStatus(record.sysLookTypes, 'B10-A06')&&record.qihuabFashionerMatch)">
                <span>微商城商详页搭配：{{ record.qihuabFashionerMatch.status == 1 ? '上架' : '下架' }}</span
                ><br />
              </template>
              <template v-if="(getStatus(record.sysLookTypes, 'B10-A07') &&record.retail)">
                <span>微商城内容社区：{{ record.retail.status == 1 ? '上架' : '下架' }}</span
                ><br />
              </template> -->
            </template>
            <span style="color: #1890ff; cursor: pointer">查看</span>
          </a-tooltip>
          <span v-else>暂无应用渠道</span>
        </span>
        <span slot="action" slot-scope="record">
          <a @click="handleDetail(record.id)">查看</a>
          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多<a-icon type="down"/></a>
            <a-menu slot="overlay">
              <a-menu-item @click="handleAddAndEdit(record.id)">编辑</a-menu-item>
              <!-- <a-menu-item @click="handleAddAndEdit2(record.id)">编辑1.0</a-menu-item> -->
              <a-menu-item @click="handleUpOrDown(1, record)" v-if="record.status === 0 || record.status === 2">启用</a-menu-item>
              <a-menu-item @click="handleUpOrDown(0, record)" v-if="record.status === 1">禁用</a-menu-item>
              <a-menu-item @click="handleLog(record.id)">日志</a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </s-table>
    </a-card>
    <Log :logVisible.sync="logVisible" ref="log"></Log>
    <GoodsDetailModal ref="goodsDetailModal"></GoodsDetailModal>
    <a-modal v-model="importvisible" title="导入搭配素材" style="width: 60%">
      <template slot="footer">
        <a-button key="back" @click="handleCancel"> 取消 </a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="handleOk"> 下一步 </a-button>
      </template>
      <a-form class="label" :wrapper-col="wrapperCol">
        <a-form-item label="来源渠道">
          <a-select v-model="channel" style="width: 60%">
            <a-select-option value="">不限</a-select-option>
            <a-select-option :value="0">BOX有搭搭配</a-select-option>
            <a-select-option :value="1">BOX企划搭配</a-select-option>
            <a-select-option :value="2"> POS+零售搭配</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
    <j-import-modal ref="importModal" :uploadParams="getUploadParams()" @ok="importOk" :templateUrl="templateUrl()" :serviceId="serviceId" :fileSize="10" :outId="outId"></j-import-modal>
  </div>
</template>

<script>
import { STable } from '@/views/box/components'
import Log from '@/views/box/boxLook/components/Log.vue'
import GoodsDetailModal from './components/goodsDetailModal'
import { addCondition, listByLook, matchDelete, goodsSkcDetail, getSizeNos, updateLook, upOrDown } from '@/api/box/boxLook'
import { queryUploadSuccess, fetchExportFileId } from '@/components/qiniuUpload/common'
import JImportModal from '@/components/qiniuUpload/JImportModal'
import ExportModal from '@/components/qiniuUpload/ExportModal'
import { copyrightList } from '@/api/pos/authority' //版权
import { seasonList } from '@/api/pos/match' //季节
import globalData from '@/assets/js/common'
import { listMixin } from '@/views/box/util/listMixin'
import { querySysCateTree } from '@api/box/api'
import { queryDim } from '@/api/box/workbench'
import moment from 'moment'
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
import { themeStatus } from '@/api/pos/match'
const columns = [
  { title: 'ID', width: 140, dataIndex: 'id' },
  { title: '来源', width: 120, scopedSlots: { customRender: 'originSource' } },
  { title: '效果图', width: 100, scopedSlots: { customRender: 'showImage' } },
  { title: '商品', width: 400, scopedSlots: { customRender: 'productImage' } },
  { title: '状态', width: 100, scopedSlots: { customRender: 'status' } },
  { title: '属性', width: 160, scopedSlots: { customRender: 'attr' } },
  { title: '标签', width: 300, scopedSlots: { customRender: 'tag' } },
  { title: '应用渠道', width: 120, scopedSlots: { customRender: 'channels' } },
  { title: '创建时间', width: 220, dataIndex: 'createTime' },
  { title: '操作', width: 120, align: 'center', fixed: 'right', scopedSlots: { customRender: 'action' } }
]
let originTypes = [
  { title: 'BOX有搭搭配', code: 'B10-A01' },
  { title: 'BOX企划搭配', code: 'B10-A05' },
  { title: 'POS+零售搭配', code: 'B10-A02' },
  { title: 'POS+导购素材', code: 'B10-A03' },
  { title: '微商城内容社区', code: 'B10-A07' },
  { title: '微商城商详更多搭配', code: 'B10-A06' },
  { title: '  微商城商详单品搭配', code: 'B10-A08' }
]
export default {
  mixins: [listMixin],
  components: {
    STable,
    Log,
    GoodsDetailModal,
    JImportModal,
    ExportModal
  },
  data() {
    return {
      titleType: '',
      retailId: '',
      matchId: '',
      planId: '',
      wrapperCol: { span: 14, offset: 0 },
      outId: null,
      userInfo: Vue.ls.get(USER_INFO),
      seasonInfo: [], //季节
      copyrightList: [], //获取版权
      channel: '', //渠道值
      serviceId: null,
      importvisible: false, //导入弹出框
      columns,
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => this.fetchData(parameter),
      logVisible: false,
      skeLoading: true,
      queryParam: {
        level: '',
        stylingCodes: [],
        sceneCodes: [],
        id: '',
        lookStatus: '',
        lookName: '',
        pcode: ''
      },
      yearShowOne: false,
      brandList: [],
      yearList: [],
      styleList: [],
      sceneList: [],
      season: [],
      bandsList: [],
      categoryTrees: [],
      scategorys: [],
      originSource: originTypes,
      sysLookTypes: originTypes,
      originList: [],
      selectionRows: []
    }
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange
      }
    },
    originSourceTitle() {
      return text => {
        let result = this.originList.filter(e => e.code == text)
        if (result.length > 0) {
          return result[0].title
        } else {
          return text
        }
      }
    },
    getStatus() {
      return (list, type) => {
        let result = list.filter(e => e.type == type)
        if (result.length > 0) {
          return true
        } else {
          return false
        }
      }
    }
  },
  filters: {
    level(t) {
      if (t == 99) return '未评级'
      if (t == 10) return 'S级'
      if (t == 20) return 'A级'
      if (t == 30) return 'B级'
    },
    gender(t) {
      if (t == 0) return '女'
      if (t == 1) return '男'
      if (t == 2) return '通用'
    }
  },
  created() {
    this.getSysCateTree()
    this.getSize()
    this.postQueryDim()
    this.getCondition()
    this.getCopyrightList()
    this.postSeasonList()
    // this.channel = 2
  },
  watch: {
    $route(to, from) {
      let edit = '/collocation/edit/'
      let detail = '/collocation/detail/'
      if ((from.path.includes(edit) || from.path.includes(detail)) && to.path.includes('/collocation/list')) {
        setTimeout(() => {
          this.$refs.table.refresh()
        }, 50)
        // this.$refs.table.refresh()
      } else if (from.path.includes('/collocation/list') && !(to.path.includes(edit) || to.path.includes(detail))) {
        return
      } else if (!(from.path.includes(edit) || from.path.includes(detail)) && to.path.includes('/collocation/list')) {
        this.selectedRowKeys = []
        this.resetList()
      }
    }
  },
  methods: {
    // 弹出日历和关闭日历的回调
    openChangeOne(status) {
      this.yearShowOne = status
    },
    handleLog(id) {
      this.$refs.log.getLog(id, 'parent')
      this.logVisible = true
    },
    handChange() {
      this.queryParam.year = null
    },
    // 得到年份选择器的值
    panelChangeOne(value) {
      this.queryParam.year = moment(value).format('YYYY')
      this.yearShowOne = false
    },
    fetchData(parameter) {
      this.skeLoading = true
      let formValue = {}
      Object.keys(this.queryParam).forEach(i => {
        if (this.queryParam[i] !== '' && this.queryParam[i] !== undefined && this.queryParam[i] !== null) {
          if (i == 'bigCateIds') {
            formValue[i] = [this.queryParam[i]]
          } else if (i == 'smallCateIds' && this.queryParam.smallCateIds.length > 0) {
            formValue[i] = [this.queryParam[i]]
          } else if (i == 'years') {
            if (this.queryParam[i].length > 0) {
              formValue.years = []
              let result = this.yearList.filter(e => this.queryParam[i].includes(e.name))
              for (let child of result) {
                if (child.name == '其他年份') {
                  let arr = child.code.map(e => e.code)
                  formValue.years = [...formValue.years, ...arr]
                } else {
                  formValue.years.push(child.code)
                }
              }
            }
          } else {
            formValue[i] = this.queryParam[i]
          }
        }
      })
      formValue.labelCodes = [...this.queryParam.stylingCodes, ...this.queryParam.sceneCodes]
      delete formValue.stylingCodes
      delete formValue.sceneCodes
      const data = {
        page: parameter,
        requestData: {
          ...formValue,
          type: formValue.sysLookTypes && formValue.sysLookTypes.length > 0 ? 3 : 4
        }
      }

      return listByLook(data).then(res => {
        if (res.code === 0) {
          const data = res
          console.log(res, 'Look')
          if (data.data) {
            data.data.forEach(item => {
              if (item.productList && item.productList.length > 0) {
                item.productList.forEach(info => {
                  info.extendJson = JSON.parse(info.extendJson)
                })
              }

              item.gallList = []
              if (item.galleryList && item.galleryList.length > 0) {
                item.gallList = item.galleryList.filter(item => item.type == 0)
              }
            })
          }
          this.skeLoading = false
          return data
        } else {
          this.$message.error(res.msg)
          const data = {
            page: {
              pageNo: 1,
              pageSize: 10,
              count: 0
            },
            data: []
          }
          this.skeLoading = false
          return data
        }
      })
    },
    getSysCateTree() {
      querySysCateTree('B08')
        .then(res => {
          const { code, result, message } = res
          if (code == 0) {
            let data = result
            this.styleList = data[0].children
            this.sceneList = data[3].children
          } else {
            this.$message.error(message)
          }
        })
        .catch(err => {
          console.log(err)
        })
      querySysCateTree('B10')
        .then(res => {
          const { code, result, message } = res
          if (code == 0) {
            let data = JSON.parse(JSON.stringify(result))

            this.originList = data
          } else {
            this.$message.error(message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    getSize() {
      getSizeNos().then(res => {
        if (res.code === 0) {
          console.log(res, 'res')
          this.season = res.data[3].children
          this.yearList = res.data[2].children
        } else {
          this.$message.error()
        }
      })
    },
    postQueryDim() {
      queryDim().then(res => {
        if (res.code === 0) {
          // this.scategorys = res.data.scategorys
          this.categoryTrees = res.data.categoryTrees
          this.bandsList = res.data.bandsV2
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    getCondition() {
      addCondition().then(res => {
        if (res.code === 0) {
          const { arcBrand } = res.data
          this.brandList = arcBrand
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    changeGood(value) {
      if (value) {
        let scategorys = this.categoryTrees.filter(e => e.key == value)
        this.scategorys = scategorys[0].childCategory
      } else {
        this.scategorys = []
      }

      delete this.queryParam.smallCateIds
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    addList() {
      this.$router.push('/box/operations/collocation/edit/add')
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      console.log(selectionRows)
      this.selectionRows = selectionRows
    },
    //搜索
    searchList() {
      this.$refs.table.refresh(true)
    },
    //重置
    resetList() {
      this.queryParam = {
        level: '',
        stylingCodes: [],
        sceneCodes: [],
        id: '',
        lookStatus: '',
        lookName: '',
        pcode: ''
      }
      this.scategorys = []
      this.$refs.table.refresh(true)
    },
    // 商品详情
    handleDetails(item) {
      console.log(item, 'item')
      const colorNo = item.substring(item.length - 3)
      const productCode = item.substring(0, item.length - 3)
      this.productDetails = {}
      this.visible = true
      const data = {
        requestData: {
          colorNo,
          productCode
        }
      }
      goodsSkcDetail(data).then(res => {
        if (res.code == 0) {
          if (res.data) {
            this.$refs.goodsDetailModal.show(res.data)
          }
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 启用禁用
    handleUpOrDown(type, data) {
      let text = type == 1 ? '启用' : '禁用'
      // this.titleType = this.originSourceTitle(data.originSource)

      // if (data.originSource == 'B10-A02') {
      //   this.retailId = data.retail.outId
      // }
      // if (data.originSource == 'B10-A01') {
      //   this.matchId = data.bFashionerMatch.id
      // }
      // if (data.originSource == 'B10-A05') {
      //   this.planId = data.qihuabFashionerMatch.id
      // }
      const that = this
      this.$confirm({
        title: `确认${text} 吗？`,
        // content: h => <div style="color:red;">Some descriptions</div>,
        onOk() {
          console.log('333')
          that.handleEnable(data, type)
        },
        onCancel() {
          console.log('Cancel')
        },
        class: 'test'
      })
    },
    frameClick(type) {
      if (!this.selectedRowKeys.length) {
        this.$message.warning('请选择')
        return
      }

      this.handleType(this.selectedRowKeys, type)
    },
    handleType(ids, type) {
      let that = this
      const params = {
        requestData: {
          ids: ids,
          type: type // :1上架，0下架
        }
      }
      updateLook(params).then(res => {
        if (res.code == 0) {
          that.$refs.table.refresh()
          this.selectedRowKeys = []
          let planList = [] //企划
          let matchList = [] //有搭
          let retailList = [] //零售
          this.selectionRows.forEach(item => {
            if (item.originSource == 'B10-A05') {
              planList.push(item)
            }
            if (item.originSource == 'B10-A01') {
              matchList.push(item)
            }
            if (item.originSource == 'B10-A02') {
              retailList.push(item)
            }
          })
          if (planList && planList.length > 0) {
            let planIds = planList.map(item => item.qihuabFashionerMatch.id)
            this.planType(planIds, type)
          }
          if (matchList && matchList.length > 0) {
            let matchIds = matchList.map(item => item.bFashionerMatch.id)
            this.matchType(matchIds, type)
          }
          if (retailList && retailList.length > 0) {
            let retailIds = retailList.map(item => Number(item.retail.outId))
            console.log(retailIds, 'retailIds')

            this.retailType(retailIds, type)
          }
          console.log(planList, '企划')
          console.log(matchList, '有搭')
          console.log(retailList, '零售')
        } else {
          that.$message.warning(res.msg)
        }
      })
    },
    handleEnable(data, type) {
      let that = this
      const params = {
        requestData: {
          ids: [data.id],
          type: type // :1上架，0下架
        }
      }
      updateLook(params).then(res => {
        if (res.code == 0) {
          that.$refs.table.refresh()
          if (data.originSource == 'B10-A02') {
            console.log('POS+零售搭配')
            this.retailType(data.retail.outId, type)
          }
          if (data.originSource == 'B10-A01') {
            console.log('有搭搭配')
            this.matchType([data.bFashionerMatch.id], type)
          }
          if (data.originSource == 'B10-A05') {
            console.log('企划搭配')
            this.planType([data.qihuabFashionerMatch.id], type)
          }
        } else {
          that.$message.warning(res.msg)
        }
      })
    },
    retailType(id, type) {
      const data = {
        // id: id,
        isShelf: type, // :1上架，0下架
        isDelete: false,
        realname: this.userInfo.realname,
        workNo: this.userInfo.workNo
      }
      if (id && Array.isArray(id)) {
        data.ids = id
      } else {
        data.id = id
      }
      themeStatus(data).then(res => {
        if (res.code == 200) {
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    planType(id, type) {
      const data = {
        requestData: {
          ids: id,
          type: type // :1上架，0下架
        }
      }
      upOrDown(data).then(res => {
        if (res.code == 0) {
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    matchType(id, type) {
      const data = {
        requestData: {
          ids: id,
          type: type // :1上架，0下架
        }
      }
      upOrDown(data).then(res => {
        if (res.code == 0) {
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    handleMatchDelete(id) {
      let that = this
      this.$confirm({
        title: `确定删除吗？`,
        // content: h => <div style="color:red;">Some descriptions</div>,
        onOk() {
          matchDelete(id).then(res => {
            if (res.code == 0) {
              that.$refs.table.refresh()
            } else {
              that.$message.warning(res.msg)
            }
          })
        },
        onCancel() {
          console.log('Cancel')
        },
        class: 'test'
      })
    },
    // 编辑
    handleAddAndEdit(id) {
      this.$router.push(`/collocationCenter/collocation/detail/${id}`)
    },
    handleAddAndEdit2(id) {
      this.$router.push(`/collocationCenter/collocation/edit/${id}`)
    },
    // 查看
    handleDetail(id) {
      this.$router.push(`/collocationCenter/collocation/detail/${id}/detail`)
    },
    //季节
    postSeasonList() {
      seasonList().then(res => {
        console.log(res.data, '季节')
        if (res.code == 200) {
          this.seasonInfo = res.data
          console.log(this.seasonInfo)
        } else {
          // this.$message.warning(res.msg)
        }
      })
    },
    // 获取版权
    async getCopyrightList() {
      const param = {
        current: 1,
        size: 100,
        status: 'Y'
      }
      const res = await copyrightList(param)
      if (res.code == 200) {
        this.copyrightList = res.data.records

        console.log(this.copyrightList, '版权')
      } else {
        this.$message.error(res.msg || res.message)
      }
    },
    // channel() {
    //   this.channelList = this.channel == 0 ? 20 : this.channel == 1 ? 20 : this.channel == 2 ? 30 : null
    // },
    // 导入
    handleImportXls() {
      this.importvisible = true
      console.log('导入')
    },
    handleOk(e) {
      this.importvisible = false
      this.$refs.importModal.show()
      console.log(this.userInfo, '用户名')
      this.serviceId = this.channel == 0 ? 20 : this.channel == 1 ? 20 : this.channel == 2 ? 30 : null
      if (this.serviceId == 20) {
        this.outId = ''
      }
      if (this.serviceId == 30) {
        this.outId = {
          realname: this.userInfo.realname,
          workNo: this.userInfo.workNo,
          copyrightList: this.copyrightList,
          seasonInfo: this.seasonInfo
        }
        this.outId = JSON.stringify(this.outId)
      }
      console.log(this.outId)
      console.log(this.channel)
    },
    handleCancel(e) {
      this.importvisible = false
    },
    // 处理上传业务的后台地址
    getImportUrl() {
      return ''
    },
    getUploadParams() {
      // console.log({...globalData.uploadParams})
      return { ...globalData.uploadParams }
    },
    // 上传成功后的方法
    importOk(result, fileList) {
      let that = this
      queryUploadSuccess(this.timer, result, 60000, function(x) {
        console.log(x)
        if (x == 'done' || x == 'warning') {
          that.$refs.importModal.close()
          that.$message.success('导入成功！请稍后刷新列表')
        }
        if (x == 'done') {
          console.log(fileList)
        }
      })
    },
    templateUrl() {
      if (this.serviceId == 20) {
        return 'https://img.bzhz.jnbygroup.com/importExcelTemp.xlsx'
      }
      if (this.serviceId == 30) {
      }
    }
  }
}
</script>

<style lang="less" scoped>
// /deep/ .ant-row {
//   display: flex;
// }
/deep/ element.style {
  width: 60%;
  margin: 0 !important ;
}
/deep/ .label .ant-row {
  display: flex;
}
// /deep/ .label .ant-col {
//   width: 00px;
// }
.show-img {
  display: block;
  width: 100%;
}
.details-wrapper {
  display: flex;
  padding-bottom: 40px;
  .main-img {
    display: block;
    width: 40%;
  }
  .text {
    flex: 1;
    margin-left: 10%;
    line-height: 35px;
    font-size: 14px;
  }
}
.id-wrapper {
  font-size: 12px;
  text-align: center;
  span {
    color: #999;
  }
}
.product-img {
  font-size: 12px;
  .img-item {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    text-align: center;
  }
}
.time {
  font-size: 12px;
  color: #999;
}
.img {
  display: block;
  margin: 2px auto;
  width: 60px;
  height: 60px;
  border: 1px dashed #f5f5f5;
  object-fit: scale-down;
  cursor: pointer;
}
.like-theme {
  position: relative;
  display: inline-block;
  width: 54px !important;
  margin-right: 8px;
  p {
    text-align: center;
    position: absolute;
    bottom: -2px;
    width: 54px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 12px;
  }
  .imgs {
    padding: 4px;
  }
}
.imgs {
  width: 60px !important;
  height: 60px !important;
  object-fit: scale-down;
  padding: 10px;
  // border: 1px solid #cdcdcd;
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  margin-top: 8px;
}
.ant-carousel {
  margin-top: 6px;
  width: 320px;
  .carousel-imgs {
    height: 100px;
    overflow: hidden;
    height: 54px;
    img {
      width: 60px;
      height: 60px;
      margin: 0 auto;
    }
  }

  .dots-imgs {
    width: 50px;
    height: 50px;
    border: 1px solid #cdcdcd;
    padding: 5px;
    object-fit: scale-down;
  }
  .slick-next::before {
    content: '';
  }
  .slick-prev::before {
    content: '';
  }
  /deep/ .slick-prev {
    left: -30px !important;
    top: 50% !important;
    .anticon {
      font-size: 16px;
    }
  }
  /deep/ .slick-next {
    right: -30px !important;
    top: 50% !important;
    .anticon {
      font-size: 16px;
    }
  }
  .custom-slick-arrow {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: rgb(116, 116, 116);
    background-color: transparent;
    opacity: 1;
    z-index: 2;
  }
  /deep/ .slick-dots-bottom {
    bottom: 50px;
    li {
      margin: 0 5px;
    }
  }
  /deep/.slick-disabled {
    color: #d9d9d9;
  }
}
</style>

